<style>
.ivu-select-dropdown {
  z-index: 9999;
}
</style>
<template>
  <Row class="layout-content-body">
    <dtable
      :columns="columns"
      :dataAll="dataAll"
      :dataShow="dataShow"
      :totals="total"
      add
      delCheck
      @refresh="getall()"
      @add="add"
      @del="del"
      @edit="edit"
      @delCheck="delCheck"
      @changePage="changePage"
      v-loading="spinShow"
    ></dtable>
    <Modal
      title="用户信息"
      v-model="editData"
      width="1000"
      :mask-closable="false"
      class="editm"
      @on-ok="asyncOK"
      @on-cancel="asyncCancel"
    >
      <Form ref="editForm" :model="formItem" :label-width="80" :rules="ruleValidate">
        <Form-item label="公告标题" prop="Title">
          <Input v-model="formItem.Title" placeholder="请输入" :disabled="addid" @on-enter="asyncOK()"></Input>
        </Form-item>
        <Form-item label="发布范围" prop="Type">
          <Radio-group v-model="formItem.Type">
            <Radio label="2" v-if="getScope">全系统</Radio>
            <Radio label="1">全单位</Radio>
            <Radio label="0">本部门</Radio>
          </Radio-group>
        </Form-item>
        <Form-item label="生效控制" prop="Btime">
          <Date-picker
            type="daterange"
            :options="optionsDate"
            placement="bottom-end"
            placeholder="选择日期"
            v-model="formItem.Rtime"
          ></Date-picker>

          <!--<Date-picker type="daterange" placement="bottom-end" :options="optionsDate" placeholder="选择日期"  v-model="formItem.Rtime" sytle="z-index: 9999;"></Date-picker>-->
        </Form-item>
        <Form-item label="公告内容" prop="Content">
          <vue-html5-editor
            :content="formItem.Content"
            :height="200"
            @change="updateData"
            ref="editor"
          ></vue-html5-editor>
        </Form-item>
      </Form>
    </Modal>
  </Row>
</template>
<script>
import api from "../../api";
import { mapMutations, mapGetters, mapState } from "vuex";
import dtable from "../../components/table/btable.vue"; //采用biztable
import moment from "moment";
export default {
  data() {
    return {
      loading: true, //点击确定按钮时，确定按钮是否显示 loading 状态，开启则需手动设置visible来关闭对话框
      spinShow: false, //数据刷新遮罩层
      columns: [
        //多选框
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "标题",
          key: "Title",
          width: 140,
          sortable: true
        },
        {
          title: "类别",
          key: "Tname",
          sortable: true
        },
        {
          title: "所属单位",
          key: "OrgName",
          sortable: true
        },
        {
          title: "部门",
          key: "Dname",
          sortable: true
        },
        {
          title: "生效时间",
          key: "Btime",
          sortable: true,
          // render (row, column, index) {
          //   return `<span>${row.Btime.slice(0,10)}</span>`;
          // }
          render(h, { row, column, index }) {
            // return `<span>${row.Etime.slice(0,10)}</span>`;
            return h("span", {}, row.Btime.slice(0, 10));
          }
        },
        {
          title: "失效时间",
          key: "Etime",
          sortable: true,
          // render ( row, column, index) {
          //   return `<span>${row.Etime.slice(0,10)}</span>`;
          //   // return h('span', {}, row.Etime.slice(0,10))
          // }
          render(h, { row, column, index }) {
            // return `<span>${row.Etime.slice(0,10)}</span>`;
            return h("span", {}, row.Etime.slice(0, 10));
          }
        },
        {
          title: "创建者",
          key: "Creater",
          sortable: true
        },
        {
          title: "发布时间",
          key: "Ctime",
          sortable: true,
          // render (row, column, index) {
          //   return `<span>${row.Ctime.slice(0,10)}</span>`;
          // }
          render(h, { row, column, index }) {
            // return `<span>${row.Etime.slice(0,10)}</span>`;
            return h("span", {}, row.Ctime.slice(0, 10));
          }
        },
        {
          title: "最后修改者",
          key: "Updater",
          sortable: true
        },
        {
          title: "最后修改时间",
          key: "Utime",
          sortable: true,
          // render (row, column, index) {
          //   return `<span>${row.Utime.slice(0,10)}</span>`;
          // }
          render(h, { row, column, index }) {
            // return `<span>${row.Etime.slice(0,10)}</span>`;
            return h("span", {}, row.Utime.slice(0, 10));
          }
        },
        {
          title: "状态",
          key: "status",
          width: 60,
          sortable: true,
          render(h, { row, column, index }) {
            // return `<span>${(row.Status === 0) ? '正常' : '停用'}</span>`;
            return h("span", {}, row.Status === 0 ? "正常" : "停用");
          }
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          align: "center",
          render: (h, { row, column, index }) => {
            // return `<i-button type="primary" size="small" @click="edit(${index})">修改</i-button> <i-button type="error" size="small" @click="remove(${index})">删除</i-button>`;
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  on: {
                    click:() => {
                      // console.log(index)
                      this.edit(row);
                    }
                  }
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click:() => {
                      this.remove(row);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ], //表格样式
      dataAll: [], //表格数据来源
      dataShow: true, //是否显示表格数据查看表单
      editData: false, //显示编辑表单
      formItem: {
        Title: "",
        Btime: "",
        Etime: "",
        Rtime: [],
        Type: 0,
        OrgId: "",
        OrgName: "",
        Status: 1,
        Content: ""
      }, //数据编辑表单
      ruleValidate: {
        Title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
        Rtime: [
          {
            required: true,
            type: "date",
            message: "生效日期不能为空",
            trigger: "change"
          }
        ]
      }, //数据编辑表单验证规则
      addid: true, //true为修改模式，false为添加模式
      role: [],
      org: [],
      total: 0,
      optionsDate: {
        shortcuts: [
          {
            text: "最近一周",
            value() {
              const end = new Date();
              const start = new Date();
              end.setTime(end.getTime() + 3600 * 1000 * 24 * 7);
              return [start, end];
            }
          },
          {
            text: "最近一个月",
            value() {
              const end = new Date();
              const start = new Date();
              end.setTime(end.getTime() + 3600 * 1000 * 24 * 30);
              return [start, end];
            }
          },
          {
            text: "最近三个月",
            value() {
              const end = new Date();
              const start = new Date();
              end.setTime(end.getTime() + 3600 * 1000 * 24 * 90);
              return [start, end];
            }
          }
        ]
      }
    };
  },
  components: {
    dtable
  },
  computed: {
    ...mapState(["isLogin", "captchaUrl", "cptId", "msg", "role", "userInfo"]),
    getRtime() {
      let rtime = [];
      rtime.push(this.formItem.Btime, this.formItem.Etime);
      return rtime;
    },
    getScope() {
      if (this.userInfo.Role[0].Type > 0) {
        return false;
      } else {
        return true;
      }
    }
  },
  watch: {},
  methods: {
    //富文本框内容对应
    updateData(data) {
      // sync content to component
      this.formItem.Content = data;
    },
    //     获取资源名称
    getNameById(value) {
      let rname = "";
      if (value || "") {
        let rv = this.dataAll.filter((col, index) => col.Id === value);
        rname = rv[0].Name;
      }
      return rname;
    },
    //      改变页码
    changePage(pagedata) {
      this.spinShow = true;
      api.getBulletin(pagedata).then(response => {
        if (response.data.code === 0) {
          this.total = response.data.Data.total;
          this.dataAll = response.data.Data.tabledata;
        } else {
          this.$Message.error(this.msg);
        }
      });
      setTimeout(() => {
        this.spinShow = false;
      }, 500);
    },
    getall() {
      let pagedata = {
        pagesize: 10,
        page: 1
      };
      this.spinShow = true;
      api.getBulletin(pagedata).then(
        response => {
          if (response.data.code === 0) {
            this.total = response.data.Data.total;
            this.dataAll = response.data.Data.tabledata;
          } else {
            this.$Message.error(this.msg);
          }
        },
        error => {
          this.$Message.error(this.msg, 4);
        }
      );
      setTimeout(() => {
        this.spinShow = false;
      }, 500);
    },
    getOrganization() {
      this.spinShow = true;
      api.getOrganizationList().then(
        response => {
          if (response.data.code === 0) {
            this.org = response.data.Data;
          } else {
            this.$Message.error(this.msg);
          }
        },
        err => {
          this.$Message.error(this.msg, 4);
        }
      );
    },
    getRole() {
      this.spinShow = true;
      api.GetOrgRoleList().then(
        response => {
          if (response.data.code === 0) {
            this.role = response.data.Data;
          } else {
            this.$Message.error(this.msg);
          }
        },
        err => {
          this.$Message.error(this.msg, 4);
        }
      );
    },
    edit(index) {
      console.log(index)
      this.addid = true;
      this.formItem = index;
      this.formItem.Rtime = this.getRtime;
      this.editData = true;
    },
    add() {
      this.addid = false;
      this.$refs["editForm"].resetFields();
      this.formItem.Rtime = this.getRtime;
      this.editData = true;
    },
    asyncOK() {
      this.formItem.Btime = moment(this.formItem.Rtime[0]).format("YYYY-MM-DD");
      this.formItem.Etime = moment(this.formItem.Rtime[1]).format("YYYY-MM-DD");
      this.$refs["editForm"].validate(valid => {
        if (valid) {
          if (this.addid) {
            api.updateBulletin(this.formItem).then(
              response => {
                if (response.data.code === 0) {
                  this.getall();
                  this.$Message.success(this.msg);
                } else {
                  this.$Message.error(this.msg, 4);
                }
              },
              err => {
                this.$Message.error(this.msg, 4);
              }
            );
          } else if (!this.addid) {
            api.addBulletin(this.formItem).then(
              response => {
                if (response.data.code === 0) {
                  this.getall();
                  this.$Message.success(this.msg);
                } else {
                  this.$Message.error(this.msg, 4);
                }
              },
              err => {
                this.$Message.error(this.msg, 4);
              }
            );
          }
          setTimeout(() => {
            this.editData = false;
          }, 1000);
        } else {
          this.$Message.error("表单验证失败!");
        }
      });
      this.editData = false;
      this.$refs["editForm"].resetFields();
    },
    asyncCancel() {
      this.getall();
      this.$refs["editForm"].resetFields();
    },
    remove(row) {
      this.$Modal.confirm({
        title: '警告',
        content: '确认删除吗',
        onOk: () => {
          this.del(row)
        }
      })
    },
    del(row) {
      api.deleteBulletin(row).then(
        response => {
          if (response.data.code === 0) {
            this.getall();
            this.$Message.success(this.msg);
          } else {
            this.$Message.error(this.msg, 4);
          }
        },
        err => {
          this.$Message.error(this.msg, 4);
        }
      );
    },
    delCheck(row) {
      api.deleteBulletins(row).then(
        response => {
          if (response.data.code === 0) {
            this.getall();
            this.$Message.success(this.msg);
          } else {
            this.$Message.error(this.msg, 4);
          }
        },
        err => {
          this.$Message.error(this.msg, 4);
        }
      );
    }
  },
  mounted() {
    let self = this;
    self.getall();
    self.getOrganization();
    self.getRole();
  }
};
</script>
